/* Hits League — approved slim Traffic Battle surfbar */
body:has(.battle-grid){
  margin:0;width:100vw;height:100vh;overflow:hidden;background:#061522
}
body:has(.battle-grid)>.wrap{
  width:100vw!important;max-width:none!important;margin:0!important;padding:0!important
}

.surfbar{
  display:grid!important;
  grid-template-columns:220px 86px minmax(510px,1fr) minmax(340px,468px) 124px!important;
  grid-template-rows:68px 34px!important;
  align-items:center!important;
  gap:0 10px!important;
  width:100%!important;
  min-height:102px!important;
  padding:6px 12px 5px!important;
  border:1px solid #159bd1!important;
  border-radius:0 0 10px 10px!important;
  background:linear-gradient(115deg,#031421 0%,#061c2d 58%,#061522 100%)!important;
  color:#fff!important;
  box-shadow:0 8px 24px rgba(2,8,23,.40)!important
}

/* MEMBER */
.surf-member{
  grid-column:1!important;grid-row:1/3!important;
  display:flex!important;align-items:center!important;gap:10px!important;
  min-width:0!important;height:78px!important;padding:8px 12px 8px 6px!important;
  border:0!important;border-right:1px solid #19475f!important;border-radius:0!important;
  background:transparent!important
}
.surf-member img{
  width:54px!important;height:54px!important;flex:0 0 54px!important;
  border:3px solid #f2a900!important;border-radius:50%!important;object-fit:cover!important;
  background:#fff!important;box-shadow:0 0 0 2px rgba(255,255,255,.05)!important
}
.surf-member-copy{min-width:0!important}
.surf-member-copy small{display:none!important}
.surf-member-copy strong{
  display:block!important;overflow:hidden!important;text-overflow:ellipsis!important;
  white-space:nowrap!important;color:#fff!important;font-size:1rem!important;
  font-weight:950!important;line-height:1.05!important
}
.surf-member-badge{
  display:inline-block!important;margin-top:4px!important;padding:0!important;
  background:transparent!important;color:#d9ff1f!important;font-size:.57rem!important;
  font-weight:950!important;text-transform:uppercase!important;letter-spacing:.03em!important
}

/* TIMER */
.surf-timer-wrap{
  grid-column:2!important;grid-row:1/3!important;position:relative!important;
  display:grid!important;place-items:center!important;height:80px!important;text-align:center!important
}
.surf-timer-label{display:none!important}
.surf-timer{
  width:64px!important;height:64px!important;display:grid!important;place-items:center!important;
  border:5px solid #8bd31d!important;border-radius:50%!important;background:#07131d!important;
  color:#fff!important;font-size:1.75rem!important;font-weight:950!important;line-height:1!important;
  box-shadow:0 0 0 3px rgba(139,211,29,.09)!important;text-shadow:none!important
}
.surf-timer::after{
  content:"SECONDS"!important;position:absolute!important;left:50%!important;bottom:9px!important;
  transform:translateX(-50%)!important;color:#fff!important;font-size:.40rem!important;
  font-weight:950!important;letter-spacing:.04em!important
}

/* CENTER */
.surf-main{
  grid-column:3!important;grid-row:1/3!important;min-width:0!important;
  align-self:center!important;padding:2px 6px!important;position:relative!important
}
.surf-title{display:block!important;margin:0 0 5px!important;text-align:left!important}
.surf-title small{
  display:block!important;color:#2bbcff!important;font-size:.66rem!important;
  font-weight:950!important;letter-spacing:.10em!important;text-transform:uppercase!important
}
.surf-title strong{
  display:block!important;margin-top:1px!important;color:#fff!important;
  font-size:1.13rem!important;font-weight:950!important;line-height:1.15!important
}
.surf-progress-line{
  display:flex!important;align-items:center!important;gap:10px!important;margin-top:7px!important;
  color:#e7eef4!important;font-size:.68rem!important;font-weight:900!important
}
.surf-progress-line b{color:#d9ff20!important;font-size:.82rem!important}
.surf-progress{
  width:min(340px,100%)!important;height:8px!important;margin-top:4px!important;
  overflow:hidden!important;border-radius:999px!important;background:#203d50!important
}
.surf-progress i{
  display:block!important;height:100%!important;border-radius:inherit!important;
  background:linear-gradient(90deg,#6840d7,#a84af6,#83d51e)!important
}
.surf-remaining{
  margin-top:4px!important;color:#d1dce5!important;font-size:.56rem!important;font-weight:750!important
}
.surf-actions{
  position:absolute!important;left:365px!important;top:50px!important;
  display:flex!important;align-items:center!important;gap:7px!important;margin:0!important
}
.surf-choice{
  min-width:110px!important;min-height:34px!important;padding:7px 13px!important;
  border:0!important;border-radius:8px!important;background:#8fe31f!important;color:#081600!important;
  font-size:.62rem!important;font-weight:950!important;cursor:pointer!important;
  box-shadow:0 0 12px rgba(143,227,31,.28)!important
}
.surf-choice.b{background:#8fe31f!important}
.surf-choice:hover{filter:brightness(.96)!important}
.surf-choice.is-disabled,.surf-choice:disabled{
  opacity:.42!important;cursor:not-allowed!important;box-shadow:none!important
}
.surf-or{color:#e5edf2!important;font-size:.61rem!important;font-weight:950!important}

/* MEMBER ADVERTISING */
.surf-ad{
  grid-column:4!important;grid-row:1!important;position:relative!important;
  align-self:end!important;text-align:center!important
}
.surf-ad::before{
  content:"MEMBER ADVERTISING"!important;position:absolute!important;left:0!important;right:0!important;
  top:-10px!important;color:#76a2bf!important;font-size:.44rem!important;font-weight:950!important;
  letter-spacing:.12em!important;text-align:center!important
}
.surf-ad img{
  display:block!important;width:min(468px,100%)!important;height:60px!important;margin:auto!important;
  border:1px solid #255773!important;border-radius:5px!important;background:#fff!important;
  object-fit:contain!important
}
.surf-ad-placeholder{
  width:min(468px,100%)!important;height:60px!important;margin:auto!important;
  display:grid!important;place-items:center!important;border:1px dashed #55778b!important;
  border-radius:5px!important;color:#8eacbe!important;font-size:.66rem!important
}

/* DASHBOARD */
.surf-dashboard{
  grid-column:5!important;grid-row:1!important;display:inline-flex!important;
  align-items:center!important;justify-content:center!important;min-height:39px!important;
  padding:0 11px!important;border:1px solid #2ba9df!important;border-radius:8px!important;
  background:#09283a!important;color:#fff!important;font-size:.64rem!important;
  font-weight:950!important;text-decoration:none!important;white-space:nowrap!important
}
.surf-dashboard:hover{background:#0e3a53!important}

/* STATS INSIDE THE SAME BAR */
.surf-inline-stats{
  grid-column:4/6!important;grid-row:2!important;display:flex!important;
  justify-content:center!important;align-items:center!important;gap:30px!important;
  min-height:28px!important;padding-top:2px!important;
  border-top:1px solid rgba(69,127,161,.20)!important
}
.surf-inline-stats>span{
  display:inline-flex!important;align-items:center!important;gap:6px!important;
  color:#d5e1ea!important;font-size:.58rem!important;font-weight:850!important
}
.surf-inline-stats b{
  display:block!important;color:#fff!important;font-size:.84rem!important;line-height:1!important
}
.surf-inline-stats em{
  display:block!important;margin-top:2px!important;color:#9dafbc!important;
  font-size:.48rem!important;font-style:normal!important;font-weight:900!important;
  text-transform:uppercase!important
}

/* WEBSITE PANELS */
.battle-shell{padding:0!important;border-radius:0!important;background:#07111f!important}
.battle-shell .battle-grid{
  height:calc(100vh - 102px)!important;gap:0!important;padding:0!important;
  border-radius:0!important;background:#f3f6fa!important
}
.battle-shell .battle-page{
  height:100%!important;min-height:0!important;border-radius:0!important
}
.battle-page iframe{height:100%!important;min-height:0!important}

/* Hide the ORIGINAL bottom Battle vote bars/buttons.
   The approved Choose Page A / Choose Page B controls live in the top surfbar
   and trigger these original buttons programmatically. */
.battle-page > .vote{
  display:none!important;
  margin:0!important;
  padding:0!important;
  height:0!important;
  min-height:0!important;
  overflow:hidden!important;
}
.battle-page > .vote .battle-pick{
  display:none!important;
}

.battle-label{
  display:flex!important;align-items:center!important;justify-content:space-between!important;
  gap:10px!important;min-height:42px!important;padding:7px 12px!important
}
.battle-open{
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  min-height:30px!important;padding:6px 10px!important;border:1px solid currentColor!important;
  border-radius:7px!important;background:#fff!important;color:inherit!important;
  font-size:.68rem!important;font-weight:850!important;text-decoration:none!important
}
.battle-toast,body:has(.battle-grid)>.notice,.surfbar+.notice{display:none!important}

/* RESPONSIVE */
@media(max-width:1180px){
  .surfbar{
    grid-template-columns:190px 76px minmax(390px,1fr) minmax(290px,390px) 108px!important
  }
  .surf-actions{position:static!important;margin:7px 0 0!important}
  .surf-progress{width:min(360px,100%)!important}
}
@media(max-width:980px){
  .surfbar{
    grid-template-columns:1fr 72px auto!important;
    grid-template-rows:auto auto auto!important;min-height:auto!important
  }
  .surf-member{grid-column:1!important;grid-row:1!important;height:60px!important}
  .surf-timer-wrap{grid-column:2!important;grid-row:1!important;height:66px!important}
  .surf-dashboard{grid-column:3!important;grid-row:1!important}
  .surf-main{grid-column:1/3!important;grid-row:2!important}
  .surf-ad{grid-column:3!important;grid-row:2!important}
  .surf-inline-stats{grid-column:1/-1!important;grid-row:3!important}
  .battle-shell .battle-grid{height:calc(100vh - 165px)!important}
}
@media(max-width:760px){
  body:has(.battle-grid){overflow:auto!important}
  .surfbar{
    grid-template-columns:1fr 62px!important;grid-template-rows:auto!important;padding:7px!important
  }
  .surf-member{grid-column:1!important;grid-row:1!important}
  .surf-timer-wrap{grid-column:2!important;grid-row:1!important}
  .surf-main{grid-column:1/-1!important;grid-row:2!important}
  .surf-ad{grid-column:1/-1!important;grid-row:3!important;margin-top:8px!important}
  .surf-dashboard{grid-column:1/-1!important;grid-row:4!important;width:100%!important}
  .surf-inline-stats{
    grid-column:1/-1!important;grid-row:5!important;gap:12px!important;flex-wrap:wrap!important
  }
  .surf-actions{position:static!important;margin:7px 0 0!important}
  .surf-choice{flex:1!important}
  .surf-progress{width:100%!important}
  .battle-shell .battle-grid{
    height:auto!important;min-height:calc(100vh - 250px)!important
  }
  .battle-shell .battle-page{height:55vh!important}
}
@media(max-width:520px){
  .surf-member img{width:42px!important;height:42px!important;flex-basis:42px!important}
  .surf-member-copy strong{font-size:.86rem!important}
  .surf-timer{width:50px!important;height:50px!important;font-size:1.25rem!important}
  .surf-title strong{font-size:.92rem!important}
  .surf-inline-stats{justify-content:space-between!important;gap:6px!important}
  .surf-ad img,.surf-ad-placeholder{height:auto!important;min-height:48px!important}
}