/* HUD top bar: the readouts box and the cycle/clock box (ui/hud/topBar.js).
   The logo/title/end cap shared with the start screen are in ../topBar.css. */
/* Between the shared straight rails (css/ui/topBar.css), as on the start
   screen: the readouts sit in a pill like the start screen's player counters. */
#resBox{ left:469px; top:19px; width:618px; height:44px;
  border-radius:22px; background:linear-gradient(180deg,#02030a,#000 60%,#03050f);
  border:1.5px solid #1d36a0; box-shadow:0 0 6px rgb(40 80 255 / .3); }
#resBox > *{ position:absolute; }
.res{ top:0; height:42px; width:136px; }
.res > *{ position:absolute; }
.resIcon{ left:0; top:6px; width:26px; height:30px; }
.resIcon svg{ width:100%; height:100%; }
.res .rl{ left:32px; top:1px; font-size:17px; color:#c0cbff; white-space:nowrap; }
.res .rv{ left:32px; top:20px; font-size:22px; font-weight:500; color:#fff; white-space:nowrap; }
.resSep{ top:5px; width:2px; height:32px; background:linear-gradient(180deg,transparent,#3b4a8a 30%,#3b4a8a 70%,transparent); }

/* the cycle, the clock and the speed buttons in the shared black box (.tbBox) */
#sdDate{ left:22px; top:5px; font-size:18px; color:#c2cdff; white-space:nowrap; }
#sdTime{ left:22px; top:28px; font-size:15px; color:#9fb1ff; }
#speedCtl{ left:140px; top:4px; height:42px; width:126px; }
#speedCtl > *{ position:absolute; }
.sBracket{ left:0; top:4px; width:8px; height:34px; border-left:2px solid #5f77f7; border-radius:10px 0 0 10px; }
.sSep{ top:6px; width:2px; height:30px; background:#2a3c96; }
.sBtn{ top:8px; height:26px; }
#btnPause{ left:15px; width:22px; }
#btnPlay { left:56px; width:22px; }
#btnFast { left:96px; width:28px; }
.sBtn svg{ width:100%; height:100%; overflow:visible; }
.fBlue{ fill:url(#gBlueIcon); } .fGold{ fill:url(#gGoldIcon); }
.sBtn:not(.on){ opacity:.8; }
.sBtn.on{ filter:drop-shadow(0 0 4px rgb(255 200 100 / .55)); }