/* Reference composition: one full-screen scene and three real actions. */
body[data-current-page="home"] .topbar{position:relative!important;min-height:64px!important;height:64px;padding:7px 4.6%!important;background:#030e16f5!important;border-bottom:1px solid #345362!important;box-shadow:0 1px 16px #4ac9ed10;backdrop-filter:blur(12px)}
.topbar .brand{min-width:200px}.topbar .brand strong{font-size:23px;letter-spacing:.18em}.topbar .counter-brand-mark{width:48px!important;height:48px!important;flex-basis:48px!important}.topbar .nav{gap:9px}.topbar .nav button{padding:9px 14px;font-size:14px;border-radius:5px}.topbar .nav button.active{background:linear-gradient(0deg,#45c4e422,transparent)!important;box-shadow:inset 0 -2px #6fdafa,0 6px 16px -10px #64dfff!important;color:#eefcff!important}.topbar .right{gap:12px}.topbar .cta{background:linear-gradient(#133544,#075776)!important;border:1px solid #70cbe4!important;box-shadow:inset 0 0 9px #5ccce42b,0 0 13px #45d2f526!important;color:#edfaff!important;border-radius:5px!important;min-height:40px!important;font-size:13px!important;letter-spacing:.1em}.topbar .notification-btn,.topbar .lang-btn{min-height:40px!important;border-radius:5px!important}.topbar .admin-nav-btn{color:#dab970!important}
#page-home.counter-home{margin:0!important;padding:0!important;background:#02090f!important}
#page-home .counter-hero{min-height:640px;height:calc(100svh - 64px);max-height:1250px;display:block;border:0}
#page-home .counter-hero-bg{inset:0;z-index:-3;background:url('assets/counter-storm-reference.webp') center center/cover no-repeat;transform:none;animation:none;filter:none;will-change:auto}
#page-home .counter-hero:before,#page-home .counter-hero:after{display:none}
#page-home .counter-lightning{display:none}
#page-home .counter-fog{pointer-events:none;position:absolute;z-index:-1;inset:auto -8% -14%;height:30%;opacity:.16;background:radial-gradient(ellipse,#9ed6e930,transparent 65%);filter:blur(25px);animation:counterMist 18s ease-in-out infinite alternate}
#page-home .counter-hero-inner{position:absolute;inset:0;width:100%;height:100%;min-height:0;padding:0;display:block;max-width:none}
#page-home .counter-actions{position:absolute;top:71%;left:50%;transform:translateX(-50%);width:max-content;max-width:94%;margin:0;display:flex;flex-wrap:nowrap;gap:16px;opacity:1;animation:counterActionsIn .8s ease-out both}
#page-home .counter-btn{height:58px;min-width:198px;padding:14px 27px;border-radius:3px;border:1px solid #749eaf;background:linear-gradient(180deg,#071923,#020d16);color:#e9f4fa;font-size:14px;letter-spacing:.075em;box-shadow:inset 0 0 0 3px #729dae19,0 0 0 1px #08151f,0 8px 20px #0006;backdrop-filter:blur(5px);text-shadow:0 1px 5px #000}
#page-home .counter-btn:before{content:'';position:absolute;inset:4px;border:1px solid #7597a72b;pointer-events:none}
#page-home .counter-btn.primary{min-width:245px;border-color:#7cecff;background:linear-gradient(180deg,#0b3a51e8,#031725f5);color:#f0fcff;box-shadow:inset 0 0 13px #2ed6ff66,0 0 0 2px #064459,0 0 0 3px #78ddec75,0 0 21px #15cfff7a,0 8px 20px #0005}
#page-home .counter-btn.gold{border-color:#d4b17a;background:linear-gradient(180deg,#261f17ee,#0c1011f5);color:#f4dfac;box-shadow:inset 0 0 13px #c1924633,0 0 0 2px #2a241b,0 0 0 3px #b2965e55,0 0 15px #d8ad442b}
#page-home .counter-btn:hover{transform:translateY(-3px);filter:brightness(1.16)}
.counter-btn:focus-visible,.topbar button:focus-visible{outline:2px solid #c5f4ff;outline-offset:6px}
@keyframes counterMist{to{transform:translateX(5%) translateY(-3%);opacity:.28}}
@keyframes counterActionsIn{from{opacity:0;translate:0 14px}to{opacity:1;translate:0 0}}
/* Shared restrained motion, never hide content before JS is available. */
.page:not(#page-home).active{animation:counterPageIn .42s ease-out both}
.account-tab.active,.admin-tab.active{animation:counterPageIn .32s ease-out both}
@keyframes counterPageIn{from{opacity:.4;translate:0 9px}to{opacity:1;translate:0 0}}
.counter-revealing{animation:counterCardIn .55s both;animation-delay:var(--reveal-delay,0ms)}
@keyframes counterCardIn{from{opacity:.4;translate:0 16px}to{opacity:1;translate:0 0}}
.info-card,.download-card,.rank-podium-card,.account-card,.stat-card,.char-card{transition:border-color .22s,box-shadow .22s,background-color .22s}
@media(hover:hover){.info-card:hover,.download-card:hover,.char-card:hover{border-color:#65bdd17a!important;box-shadow:0 12px 34px #0004,0 0 20px #42cced0c!important}}
.table-wrap tbody tr,.rank-table tbody tr{transition:background-color .18s}
@media(min-width:1600px){#page-home .counter-actions{top:73%}}
@media(max-width:1250px){.topbar .brand{min-width:155px}.topbar .nav{gap:0}.topbar .nav button{padding:8px 9px}.topbar .right{gap:8px}.topbar .right>.ghost{display:none}}
@media(max-width:1000px){body[data-current-page="home"] .topbar{height:auto;min-height:64px!important;padding:9px 18px!important}.topbar .nav{display:none!important}.mobile-tabs{display:flex!important}.topbar .right{margin-left:auto}#page-home .counter-hero{height:calc(100svh - 118px);min-height:570px}.topbar .brand strong{font-size:20px}#page-home .counter-actions{gap:12px}#page-home .counter-btn{min-width:165px;padding:14px 18px}#page-home .counter-btn.primary{min-width:205px}}
@media(max-width:700px){#page-home .counter-hero{height:calc(100svh - 118px);min-height:590px;max-height:1000px;background:#030b12}#page-home .counter-hero-bg{background-size:auto 100%;background-position:47% center;opacity:.78}#page-home .counter-hero-inner{padding:0;min-height:0}#page-home .counter-actions{top:auto;bottom:9%;width:88%;max-width:390px;display:grid;grid-template-columns:1fr;gap:13px}#page-home .counter-btn,#page-home .counter-btn.primary{min-width:0;width:100%;height:52px;font-size:13px}.topbar .right>.cta{display:none}.topbar .brand{min-width:0}.topbar .brand strong{font-size:17px}.topbar .counter-brand-mark{width:38px!important;height:38px!important;flex-basis:38px!important}.topbar .right{gap:7px}.topbar .lang-btn{padding:8px!important;font-size:13px!important}#page-home .counter-fog{display:none}}
@media(prefers-reduced-motion:reduce){#page-home .counter-fog,#page-home .counter-actions,.page:not(#page-home).active,.account-tab.active,.admin-tab.active,.counter-revealing{animation:none!important}.counter-btn,.info-card,.download-card,.char-card{transition:none!important}}
.account-view.active,.admin-view.active{animation:counterPageIn .32s ease-out both}
@media(max-width:700px){#page-home .counter-hero-bg{background-position:right center}#page-home .counter-sr-title{position:absolute!important;left:5%;top:9%;width:90%!important;height:auto!important;clip:auto!important;overflow:visible!important;white-space:normal!important;margin:0!important;padding:0!important;font:500 clamp(34px,10vw,62px)/1.15 Georgia,serif;text-transform:uppercase;letter-spacing:.07em;color:#e5f7ff;text-shadow:0 3px 6px #00101b,0 0 24px #042738;background:none;z-index:1}}
@media(prefers-reduced-motion:reduce){.account-view.active,.admin-view.active{animation:none!important}}


/* FINAL L2COUNTER HEADER LOGO */
body[data-current-page="home"] .topbar,
.inner-page .header{
  overflow:visible!important;
}

.topbar .counter-logo-brand,
.inner-page .header .counter-logo-brand{
  width:280px!important;
  min-width:280px!important;
  height:64px!important;
  flex:0 0 280px!important;
  padding:0!important;
  margin:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  overflow:visible!important;
  background:transparent!important;
}

.topbar .counter-header-logo,
.inner-page .header .counter-header-logo{
  display:block!important;
  width:240px!important;
  height:76px!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
  object-fit:contain!important;
  object-position:left center!important;
  transform:translateY(4px)!important;
  transform-origin:left center!important;
  mix-blend-mode:normal!important;
  border:0!important;
  background:transparent!important;
  filter:
    brightness(1.04)
    contrast(1.06)
    saturate(1.03)
    drop-shadow(0 0 10px rgba(76,204,230,.17))!important;
}

@media(max-width:1450px){
  .topbar .counter-logo-brand,
  .inner-page .header .counter-logo-brand{
    width:245px!important;
    min-width:245px!important;
    flex-basis:245px!important;
  }
  .topbar .counter-header-logo,
  .inner-page .header .counter-header-logo{
    width:215px!important;
    height:70px!important;
  }
}

@media(max-width:1250px){
  .topbar .counter-logo-brand,
  .inner-page .header .counter-logo-brand{
    width:210px!important;
    min-width:210px!important;
    flex-basis:210px!important;
  }
  .topbar .counter-header-logo,
  .inner-page .header .counter-header-logo{
    width:188px!important;
    height:62px!important;
    transform:translateY(2px)!important;
  }
}

@media(max-width:1000px){
  .topbar .counter-logo-brand,
  .inner-page .header .counter-logo-brand{
    width:192px!important;
    min-width:192px!important;
    flex-basis:192px!important;
  }
  .topbar .counter-header-logo,
  .inner-page .header .counter-header-logo{
    width:174px!important;
    height:58px!important;
  }
}

@media(max-width:700px){
  .topbar .counter-logo-brand,
  .inner-page .header .counter-logo-brand{
    width:154px!important;
    min-width:154px!important;
    height:46px!important;
    flex-basis:154px!important;
  }
  .topbar .counter-header-logo,
  .inner-page .header .counter-header-logo{
    width:142px!important;
    height:48px!important;
    transform:none!important;
  }
}

/* HEADER TRANSPARENT BACKGROUND */
body[data-current-page="home"] .topbar,
.inner-page .header{
  background:transparent!important;
  background-color:transparent!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  border-bottom-color:rgba(100,205,225,.12)!important;
}


/* HEADER OVER HERO FIX */
body[data-current-page="home"] .topbar{
  position:absolute!important;
  top:0!important;
  left:0!important;
  right:0!important;
  z-index:100!important;
  width:100%!important;
  margin:0!important;
  background:transparent!important;
  background-color:transparent!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  border-bottom:0!important;
}

body[data-current-page="home"] #page-home,
body[data-current-page="home"] .counter-hero{
  margin-top:0!important;
  padding-top:0!important;
}

body[data-current-page="home"] .counter-hero{
  min-height:100svh!important;
  height:100svh!important;
}

body[data-current-page="home"] .counter-hero-bg{
  top:0!important;
}

@media(max-width:1000px){
  body[data-current-page="home"] .topbar{
    position:absolute!important;
    top:0!important;
  }
  body[data-current-page="home"] .mobile-tabs{
    margin-top:64px!important;
  }
}


/* INNER PAGES = INDEX HEADER */
.inner-page .inner-index-header{
  min-height:64px!important;
  height:64px!important;
  padding:7px 4.6%!important;
  display:flex!important;
  align-items:center!important;
  gap:18px!important;
  background:transparent!important;
  background-color:transparent!important;
  border-bottom:0!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  position:sticky!important;
  top:0!important;
  z-index:100!important;
}

.inner-page .inner-index-header .counter-logo-brand{
  width:280px!important;
  min-width:280px!important;
  height:64px!important;
  flex:0 0 280px!important;
}

.inner-page .inner-index-header .counter-header-logo{
  width:240px!important;
  height:76px!important;
  object-fit:contain!important;
  object-position:left center!important;
  transform:translateY(4px)!important;
}

.inner-page .inner-index-header nav{
  display:flex!important;
  flex:1!important;
  align-items:center!important;
  justify-content:center!important;
  gap:9px!important;
  position:static!important;
  padding:0!important;
  background:transparent!important;
  border:0!important;
}

.inner-page .inner-index-header nav a{
  min-height:44px!important;
  padding:9px 14px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:5px!important;
  color:#91a9b2!important;
  font-size:14px!important;
  font-weight:700!important;
  letter-spacing:.03em!important;
  white-space:nowrap!important;
  background:transparent!important;
  border:0!important;
}

.inner-page .inner-index-header nav a:hover,
.inner-page .inner-index-header nav a.active{
  color:#eefcff!important;
  background:linear-gradient(0deg,rgba(69,196,228,.13),transparent)!important;
  box-shadow:inset 0 -2px #6fdafa,0 6px 16px -10px #64dfff!important;
}

.inner-page .inner-index-header nav a.active::after{
  display:none!important;
}

.inner-page .inner-index-header .inner-admin-link{
  color:#dab970!important;
}

.inner-page .inner-index-header .inner-header-actions{
  display:flex!important;
  align-items:center!important;
  gap:12px!important;
  margin-left:auto!important;
  flex:0 0 auto!important;
}

.inner-page .inner-index-header .inner-download-link{
  min-height:40px!important;
  padding:9px 12px!important;
  display:inline-flex!important;
  align-items:center!important;
  color:#91a9b2!important;
  font-size:14px!important;
  font-weight:700!important;
  border-radius:5px!important;
  white-space:nowrap!important;
}

.inner-page .inner-index-header .inner-download-link:hover,
.inner-page .inner-index-header .inner-download-link.active{
  color:#eefcff!important;
  background:rgba(69,196,228,.08)!important;
}

.inner-page .inner-index-header .inner-notifications{
  position:relative!important;
}

.inner-page .inner-index-header .inner-notification-link{
  position:relative!important;
  min-width:44px!important;
  height:40px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:0 11px!important;
  border:1px solid rgba(109,205,222,.20)!important;
  border-radius:5px!important;
  background:rgba(11,35,47,.72)!important;
  color:#dfc071!important;
  text-decoration:none!important;
}

.inner-page .inner-index-header .inner-notification-link .notification-count{
  position:absolute!important;
  top:-7px!important;
  right:-5px!important;
  min-width:18px!important;
  height:18px!important;
  padding:0 4px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:999px!important;
  background:#d6ad55!important;
  color:#07131b!important;
  font-size:11px!important;
  font-weight:900!important;
  line-height:1!important;
}

.inner-page .inner-index-header .language-mount{
  display:flex!important;
  align-items:center!important;
}

.inner-page .inner-index-header .language-picker summary{
  min-height:40px!important;
  padding:8px 10px!important;
  border-radius:5px!important;
  border-color:rgba(109,205,222,.20)!important;
  background:rgba(11,35,47,.72)!important;
  font-size:13px!important;
  font-weight:800!important;
}

.inner-page .inner-index-header .inner-start-button{
  min-height:40px!important;
  padding:10px 15px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:5px!important;
  border:1px solid #70cbe4!important;
  background:linear-gradient(#133544,#075776)!important;
  box-shadow:inset 0 0 9px rgba(92,204,228,.17),0 0 13px rgba(69,210,245,.15)!important;
  color:#edfaff!important;
  font-size:13px!important;
  font-weight:900!important;
  letter-spacing:.1em!important;
  text-transform:uppercase!important;
  white-space:nowrap!important;
}

@media(max-width:1450px){
  .inner-page .inner-index-header .counter-logo-brand{
    width:245px!important;
    min-width:245px!important;
    flex-basis:245px!important;
  }
  .inner-page .inner-index-header .counter-header-logo{
    width:215px!important;
    height:70px!important;
  }
  .inner-page .inner-index-header nav{
    gap:3px!important;
  }
  .inner-page .inner-index-header nav a{
    padding:8px 10px!important;
  }
  .inner-page .inner-index-header .inner-header-actions{
    gap:8px!important;
  }
}

@media(max-width:1250px){
  .inner-page .inner-index-header .counter-logo-brand{
    width:210px!important;
    min-width:210px!important;
    flex-basis:210px!important;
  }
  .inner-page .inner-index-header .counter-header-logo{
    width:188px!important;
    height:62px!important;
    transform:translateY(2px)!important;
  }
  .inner-page .inner-index-header .inner-download-link{
    display:none!important;
  }
}

@media(max-width:1100px){
  .inner-page .inner-index-header{
    height:auto!important;
    min-height:64px!important;
    padding:9px 18px!important;
  }
  .inner-page .inner-index-header nav{
    display:none!important;
    position:absolute!important;
    top:100%!important;
    left:0!important;
    right:0!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    gap:8px!important;
    padding:18px!important;
    background:rgba(3,14,22,.98)!important;
    border-bottom:1px solid rgba(109,205,222,.18)!important;
  }
  .inner-page .inner-index-header nav.open{
    display:flex!important;
  }
  .inner-page .inner-index-header nav a{
    width:100%!important;
    justify-content:flex-start!important;
  }
  .inner-page .inner-index-header .menu{
    display:block!important;
  }
  .inner-page .inner-index-header .inner-start-button{
    display:none!important;
  }
}

@media(max-width:700px){
  .inner-page .inner-index-header{
    padding:8px 12px!important;
  }
  .inner-page .inner-index-header .counter-logo-brand{
    width:154px!important;
    min-width:154px!important;
    flex-basis:154px!important;
  }
  .inner-page .inner-index-header .counter-header-logo{
    width:142px!important;
    height:48px!important;
    transform:none!important;
  }
  .inner-page .inner-index-header .inner-notifications{
    display:none!important;
  }
  .inner-page .inner-index-header .language-picker summary{
    min-width:58px!important;
    padding:7px!important;
  }
}


/* HOME + INFO = RANKINGS HEADER */
body[data-current-page="home"] .topbar,
body.info-experience .inner-index-header{
  position:sticky!important;
  top:0!important;
  left:auto!important;
  right:auto!important;
  z-index:100!important;
  width:100%!important;
  min-height:78px!important;
  height:78px!important;
  margin:0!important;
  padding:12px max(22px,4%)!important;
  display:flex!important;
  align-items:center!important;
  gap:18px!important;
  background:rgba(3,11,17,.92)!important;
  background-color:rgba(3,11,17,.92)!important;
  border-bottom:1px solid rgba(111,205,222,.18)!important;
  box-shadow:0 12px 38px rgba(0,0,0,.18)!important;
  backdrop-filter:blur(14px)!important;
  -webkit-backdrop-filter:blur(14px)!important;
}

/* Home should start below the solid rankings-style header. */
body[data-current-page="home"] #page-home{
  margin-top:0!important;
}
body[data-current-page="home"] .counter-hero{
  min-height:calc(100svh - 78px)!important;
  height:calc(100svh - 78px)!important;
}

/* Match the same nav rhythm used on Rankings. */
body[data-current-page="home"] .topbar .nav,
body.info-experience .inner-index-header nav{
  gap:9px!important;
}
body[data-current-page="home"] .topbar .nav button,
body.info-experience .inner-index-header nav a{
  min-height:44px!important;
  padding:9px 14px!important;
  border-radius:8px!important;
  color:#91a9b2!important;
  background:transparent!important;
}
body[data-current-page="home"] .topbar .nav button:hover,
body[data-current-page="home"] .topbar .nav button.active,
body.info-experience .inner-index-header nav a:hover,
body.info-experience .inner-index-header nav a.active{
  color:#eefcff!important;
  background:rgba(78,176,195,.09)!important;
}
body[data-current-page="home"] .topbar .nav button.active,
body.info-experience .inner-index-header nav a.active{
  box-shadow:inset 0 -2px var(--lc-cyan)!important;
}

/* Same controls on the right side. */
body[data-current-page="home"] .topbar .right,
body.info-experience .inner-index-header .inner-header-actions{
  gap:12px!important;
  align-items:center!important;
}
body[data-current-page="home"] .topbar .cta,
body.info-experience .inner-index-header .inner-start-button{
  min-height:44px!important;
  border-radius:8px!important;
  border-color:rgba(103,213,233,.42)!important;
  background:linear-gradient(180deg,rgba(47,154,177,.34),rgba(12,58,75,.52))!important;
  color:#ebfcff!important;
  box-shadow:0 8px 24px rgba(47,163,187,.10)!important;
}

/* Info header follows the same logo block as the Rankings header. */
body.info-experience .inner-index-header .counter-logo-brand{
  height:54px!important;
}
body.info-experience .inner-index-header .counter-header-logo{
  transform:none!important;
}

/* Remove the old transparent / overlay behavior specifically from Home + Info. */
body[data-current-page="home"] .topbar,
body.info-experience .inner-index-header{
  overflow:visible!important;
}
body[data-current-page="home"] .mobile-tabs{
  margin-top:0!important;
}

@media(max-width:1100px){
  body[data-current-page="home"] .topbar,
  body.info-experience .inner-index-header{
    min-height:74px!important;
    height:auto!important;
    padding:10px 18px!important;
  }
  body[data-current-page="home"] .counter-hero{
    min-height:calc(100svh - 74px)!important;
    height:calc(100svh - 74px)!important;
  }
}

@media(max-width:700px){
  body[data-current-page="home"] .topbar,
  body.info-experience .inner-index-header{
    min-height:72px!important;
    padding:10px 14px!important;
  }
  body[data-current-page="home"] .counter-hero{
    min-height:calc(100svh - 72px)!important;
    height:calc(100svh - 72px)!important;
  }
}