/* ===== TOPBAR REALTIME + RUNNING WELCOME FINAL =====
   Isolated layer: does not modify game/API/livechat logic.
*/
.jp-topbar{
  position:relative !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  height:41px !important;
  min-height:41px !important;
  box-sizing:border-box !important;
  overflow:hidden !important;
}

.jp-topbar #jpRealtimeClock{
  order:1 !important;
  flex:0 0 250px !important;
  width:250px !important;
  min-width:250px !important;
  margin:0 !important;
  padding-left:46px !important;
  box-sizing:border-box !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:clip !important;
  color:#fff !important;
  font-size:10px !important;
  line-height:1 !important;
  text-align:left !important;
}

.jp-topbar #jpRealtimeClock::before{
  content:"🔊" !important;
  position:absolute !important;
  left:7px !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  font-size:11px !important;
  line-height:1 !important;
}

.jp-topbar #jpRunningWelcome{
  order:2 !important;
  position:absolute !important;
  left:250px !important;
  right:310px !important;
  top:0 !important;
  height:41px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 12px !important;
  box-sizing:border-box !important;
  overflow:hidden !important;
  white-space:nowrap !important;
  color:#fff !important;
  font-size:10px !important;
  font-weight:700 !important;
  text-align:center !important;
  pointer-events:none !important;
}

.jp-topbar #jpRunningWelcome span{
  display:inline-block !important;
  min-width:max-content !important;
  white-space:nowrap !important;
  animation:jpWelcomeRun 9s linear infinite !important;
  will-change:transform !important;
}

@keyframes jpWelcomeRun{
  0%{transform:translateX(100%)}
  100%{transform:translateX(-100%)}
}

.jp-topbar .jp-demo-login{
  order:3 !important;
  margin-left:auto !important;
  position:relative !important;
  z-index:3 !important;
}

/* Keep the original compact behavior on small screens. */
@media(max-width:700px){
  .jp-topbar{
    height:40px !important;
    min-height:40px !important;
  }

  .jp-topbar #jpRealtimeClock{
    flex:0 0 178px !important;
    width:178px !important;
    min-width:178px !important;
    padding-left:28px !important;
    font-size:8px !important;
  }

  .jp-topbar #jpRealtimeClock::before{
    left:7px !important;
    font-size:9px !important;
  }

  .jp-topbar #jpRunningWelcome{
    left:178px !important;
    right:245px !important;
    height:40px !important;
    font-size:8px !important;
    padding:0 6px !important;
  }
}

@media(max-width:520px){
  .jp-topbar #jpRealtimeClock{
    flex-basis:155px !important;
    width:155px !important;
    min-width:155px !important;
    padding-left:25px !important;
    font-size:7px !important;
  }

  .jp-topbar #jpRunningWelcome{
    left:155px !important;
    right:0 !important;
    width:calc(100% - 155px) !important;
    justify-content:flex-start !important;
    padding-left:8px !important;
    padding-right:0 !important;
    font-size:7px !important;
  }

  .jp-topbar #jpRunningWelcome span{
    animation-duration:8s !important;
  }

  .jp-topbar .jp-demo-login{
    display:none !important;
  }
}