/* Team + RC Coin integrated top-bar controls */
#viewMain .hubTop{display:none!important}

.topbar .teamTopBadge,
.topbar .premiumCoinButton{
  -webkit-tap-highlight-color:transparent;
  appearance:none;
  position:relative;
  z-index:1;
  height:48px;
  min-height:48px;
  border-radius:17px;
  border:1px solid rgba(229,185,62,.31);
  color:#f5e9c6;
  background:linear-gradient(180deg,rgba(34,28,17,.98),rgba(12,11,9,.99));
  box-shadow:inset 0 1px 0 rgba(255,235,171,.09),0 10px 24px rgba(0,0,0,.27);
  cursor:pointer;
  transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease,background .16s ease;
}
.topbar .teamTopBadge:hover,
.topbar .teamTopBadge:focus-visible,
.topbar .premiumCoinButton:hover,
.topbar .premiumCoinButton:focus-visible{
  border-color:rgba(244,208,100,.58);
  background:linear-gradient(180deg,rgba(47,38,21,.99),rgba(15,13,9,.99));
  box-shadow:inset 0 1px 0 rgba(255,240,186,.13),0 13px 28px rgba(0,0,0,.32),0 0 0 2px rgba(223,177,51,.08);
  transform:translateY(-1px);
  outline:none;
}
.topbar .teamTopBadge:active,
.topbar .premiumCoinButton:active{transform:translateY(1px) scale(.98)}

.topbar .teamTopBadge{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:8px;
  max-width:132px;
  padding:5px 10px 5px 5px;
}
.topbar .teamBadgeMark{
  flex:0 0 36px;
  width:36px;
  height:36px;
  border-radius:13px;
  display:grid;
  place-items:center;
  color:#171106;
  font-size:17px;
  font-weight:950;
  letter-spacing:-.03em;
  background:linear-gradient(145deg,#f6d76e,#d7a72d 58%,#9a650d);
  box-shadow:inset 0 1px 0 rgba(255,252,222,.72),0 6px 14px rgba(0,0,0,.25);
}
.topbar .teamBadgeName{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:11px;
  line-height:1;
  font-weight:850;
  color:#f2e8d3;
}

.topbar .premiumCoinButton{
  flex:0 0 auto!important;
  display:flex!important;
  align-items:center!important;
  gap:7px!important;
  min-width:90px;
  padding:5px 8px 5px 6px!important;
  border-color:rgba(239,196,66,.44)!important;
  background:
    radial-gradient(circle at 22% 12%,rgba(255,224,123,.16),transparent 34%),
    linear-gradient(180deg,rgba(39,30,14,.99),rgba(13,11,7,.99))!important;
}
.topbar .premiumCoinButton::after{
  content:"";
  position:absolute;
  inset:1px;
  border-radius:16px;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(255,228,143,.055),transparent 42%);
}
.topbar .premiumCoinButton .coinIcon{
  position:relative;
  z-index:1;
  flex:0 0 34px;
  width:34px;
  height:34px;
  border-radius:12px;
  display:grid;
  place-items:center;
  color:#f4cc57;
  background:rgba(226,180,51,.09);
  border:1px solid rgba(240,200,78,.19);
  box-shadow:inset 0 1px 0 rgba(255,236,169,.08);
}
.topbar .premiumCoinButton .coinIcon svg{width:23px;height:23px}
.topbar .coinValueWrap{
  position:relative;
  z-index:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  line-height:.92;
}
.topbar .coinAmt{
  min-width:0;
  color:#fff0bd;
  font-size:15px;
  font-weight:950;
  letter-spacing:-.02em;
}
.topbar .coinValueWrap small{
  margin-top:3px;
  color:#bba66b;
  font-size:7px;
  line-height:1;
  font-weight:900;
  letter-spacing:.13em;
}
.topbar .coinOpenArrow{
  position:relative;
  z-index:1;
  color:#d9b648;
  font-size:18px;
  line-height:1;
  margin-left:-2px;
}

/* The top-bar controls replace the old Team and Coins menu entries. */
#viewMain .hubModuleGrid{margin-top:0!important}

@media(max-width:760px){
  .topbar{gap:7px!important}
  .topbar .teamTopBadge{
    flex:0 0 46px;
    width:46px;
    max-width:46px;
    padding:5px;
    justify-content:center;
  }
  .topbar .teamBadgeName{display:none}
  .topbar .teamBadgeMark{width:34px;height:34px;flex-basis:34px;border-radius:11px}
  .topbar .premiumCoinButton{min-width:82px;height:46px;min-height:46px;padding:5px 6px 5px 5px!important;gap:5px!important}
  .topbar .premiumCoinButton .coinIcon{width:32px;height:32px;flex-basis:32px;border-radius:10px}
  .topbar .premiumCoinButton .coinIcon svg{width:21px;height:21px}
  .topbar .coinAmt{font-size:14px}
  .topbar .coinOpenArrow{display:none}
}

@media(max-width:420px){
  .topbar .title{font-size:21px!important}
  .topbar .teamTopBadge{flex-basis:42px;width:42px;max-width:42px;height:44px;min-height:44px;border-radius:14px}
  .topbar .teamBadgeMark{width:32px;height:32px;flex-basis:32px}
  .topbar .premiumCoinButton{min-width:75px;height:44px;min-height:44px;border-radius:14px}
  .topbar .premiumCoinButton::after{border-radius:13px}
  .topbar .premiumCoinButton .coinIcon{width:29px;height:29px;flex-basis:29px}
  .topbar .premiumCoinButton .coinIcon svg{width:19px;height:19px}
  .topbar .coinAmt{font-size:13px}
  .topbar .coinValueWrap small{font-size:6px}
}